<template>
<view>
 
<scroll-view class="container" :style="'height:' + containerHeight + 'px;'" scroll-y="true" bindscroll="container_scroll">
    <view class="imgBox" @tap="groupImgPreview" :style="'height:' + groupImgHeight + 'px'">
        <image :src="group_detail.now_group.image"></image>
        <!--view class="back" catchtap="backPrevPage"></view-->
        <view class="imgCon">
            <view class="title">{{group_detail.now_group.group_name}}</view>
            <view class="desc">{{group_detail.now_group.s_name}}</view>
        </view>
    </view>
    <view class="buyBox bw mb20">
        <view class="priceDiv">
            <text class="price">
                <text>￥</text><text class="fw">{{group_detail.now_group.price}}</text>
                <text class="old">
                    <text>￥</text><text class="tdlh">{{group_detail.now_group.old_price}}</text>
                </text>
            </text>
            <button class="buy-btn" @tap="buyEvent">立即购买</button>
        </view>
        <view class="cheapDiv" v-if="group_detail.now_group.score_money != 0">积分抵现 <text class="tag">本单最高可用{{group_detail.now_group.score}}积分抵{{group_detail.now_group.score_money}}元</text></view>
        <view class="saleDiv">
           <block v-if="group_detail.now_group.no_refund == 1">
				<text class="span">抢购商品，支付后不可退款</text>
			</block>
			<block v-else>
				<text class="span"><text class="yesLightIcon"></text>随时退</text>
				<text class="span"><text class="yesLightIcon"></text>过期退</text>
			</block>
            <text class="span sale" v-if="group_detail.now_group.sale_count != 0"><text class="yesIcon"></text>已售{{group_detail.now_group.sale_count}}</text>
        </view>
    </view>
    <view class="storeBox mb20 bw">
        <view class="storeList">
            <block v-for="(item, index) in group_detail.store_list" :key="index">
                <view class="item" v-if="index < 2" @tap="openMap" :data-lat="item.lat" :data-lng="item.lng" data-type="baidu" :data-name="item.name" :data-address="item.area_name + '' + item.adress">
                    <view class="name">{{item.name}}</view>
                    <view class="address">{{item.area_name}}{{item.adress}}</view>
                    <view class="phoneBox" @click.stop="callPhone" :data-phone="item.phone">
                        <view class="phone"></view>
                    </view>
                </view>
            </block>
        </view>
        <view class="more" v-if="group_detail.store_list.length > 2" @tap="goStoreList">全部{{group_detail.store_list.length}}家分店</view>
    </view>
    <view class="introList term" v-if="group_detail.cue_arr.length > 1">
        <view class="titleDiv">
            <view class="title">购买须知</view>
        </view>
        <view class="content">
            <block v-for="(item, index) in group_detail.cue_arr" :key="index">
                <view class="item">
                    <text class="fw">{{item.key}}：</text>
                    <text>{{item.value}}</text>
                </view>
            </block>
        </view>
    </view>
    <view class="introList">
        <view class="titleDiv">
            <view class="title">本单详情</view>
        </view>
        <view class="content detailCon">
          <richText :nodes="group_detail.now_group.content_rich"></richText>
        </view>
    </view>
    <view class="group_list bw mb20" v-if="group_detail.merchant_group_list.length > 0">
        <view class="titleDiv">
            <view class="title">商家其他团购</view>
        </view>
        <block v-for="(item, group_list) in group_detail.merchant_group_list" :key="group_list">
            <view class="menulink" @tap="goGroup" :data-group_id="item.group_id" v-if="item.pin_num == 0">
                <view class="fl ml_left">
                    <image :src="item.list_pic"></image>
                    <view :class="'pos ' + (item.pin_num == 0 ? 'group' : 'fight')"></view>         
                </view>
                <view class="ml_menu">
                    <view class="tit">{{item.group_name}}</view>
                    <view class="cf bot">
                        <view class="fl cf">
                            <view class="fl val">
                                <text class="mall">￥</text>
                                <text class="price">{{item.price}}</text>
                            </view>
                            <view class="fl rackrate">{{item.old_price}}</view>
                        </view>
                        <view class="fr sold" v-if="item.sale_count != 0">已售 {{item.sale_count}}</view>
                    </view>
                </view>
            </view>
        </block>
    </view>
    <view style="height:100rpx;"></view>
    <view class="positionDiv" :style="'display:' + (bottomBuyShow ? 'block' : 'none')">
        <view class="fl">
            <view class="back" @click.stop="backPrevPage"></view>
        </view>
        <view class="center">
            <text v-if="group_detail.now_group.tuan_type != 2">{{group_detail.now_group.merchant_name}}</text>
            <text v-else>{{group_detail.now_group.s_name}}</text>
        </view>
         <view class="fr">
            <button class="buy-btn" @tap="buyEvent">购买</button>
        </view>
    </view>
</scroll-view>
</view>
</template>

<script>
import common from '../../utils/common.js'
var sysRes = {};
var rpxUnit = 0;
var app = getApp();
var _this;
import richtext from "./component/rich-text/rich-text";

export default {
  data() {
    return {
      group_id: 0,
      group_detail: {},
      htmlParseImg: [],
      groupImgHeight: 200,
      containerHeight: 600,
      bottomBuyShow: false,
      userInfo: {},
      openId: ''
    };
  },

  onUnload: function () {},
  onHide: function () {},
  onShow: function () {},
  onReady: function () {},
  onLoad: function (options) {
    _this = this;
    common.setMainColor(_this);
    wx.showShareMenu({
      withShareTicket: true
    });
    sysRes = wx.getSystemInfoSync();
    rpxUnit = sysRes.windowWidth / 750;

    _this.setData({
      group_id: options.group_id,
      groupImgHeight: parseInt(sysRes.windowWidth * 500 / 900),
      containerHeight: sysRes.windowHeight
    });

    common.post('Group&a=detail', {
      group_id: _this.group_id
    }, "setPageContent", _this);

    if (options.scene == 1044) {
      common.getUserInfo(function (userInfo) {
        _this.setData({
          userInfo: userInfo,
          openId: userInfo.openid
        });

        var obj = {
          'spread_openid': options.openId,
          'now_user_openid': userInfo.wxapp_openid,
          'code': wx.getStorageSync('code')
        };
        common.post('Home&a=wxapp_openid', obj, "scene", _this);
      });
    }
  },
  onShareAppMessage: function () {
    var id = _this.userInfo.wxapp_openid;
	let pageLink = 'pages/group/detail?group_id=' + _this.group_id + '&openId=' + id
	pageLink = common.addShareParam(pageLink)
    return {
      title: _this.group_detail.share.title,
      desc: _this.group_detail.share.content,
      path: pageLink,
      success: function (res) {
        var shareTickets = res.shareTickets;

        if (shareTickets.length == 0) {
          return false;
        }

        wx.getShareInfo({
          shareTicket: shareTickets[0],
          success: function (res) {
            var encryptedData = res.encryptedData;
            var iv = res.iv;
          }
        });
      }
    };
  },
  components: {
    richtext
  },
  props: {},
  methods: {
    goStoreList: function () {
      wx.setStorage({
        key: 'group_store_list',
        data: _this.group_detail.store_list
      });
      wx.navigateTo({
        url: 'shop?group_id=' + _this.group_id
      });
    },
    goGroup: function (e) {
      wx.redirectTo({
        url: 'detail?group_id=' + e.currentTarget.dataset.group_id
      });
    },
    buyEvent: function (e) {
      console.log(1111);

      if (_this.group_detail.now_group.trade_type == 'appoint' && _this.group_detail.now_group.appoint_id > 0) {
        wx.showModal({
          title: '提示',
          content: "暂时不支持预约类型团购",
          showCancel: false
        });
        return false;
      }

      wx.navigateTo({
        url: 'buy?group_id=' + _this.group_id
      });
    },
    callPhone: function (e) {
      common.callPhone(e.currentTarget.dataset.phone);
    },
    openMap: function (e) {
      common.openMap(e.currentTarget.dataset);
    },
    container_scroll: function (e) {
      _this.setData({
        bottomBuyShow: e.detail.scrollTop > 250 ? true : false
      });
    },
    backPrevPage: function () {
      wx.navigateBack();
    },
    groupImgPreview: function (e) {
      wx.previewImage({
        current: _this.group_detail.now_group.image,
        urls: _this.group_detail.now_group.pic_list
      });
    },
    htmlParseImgLoad: function (e) {
      var width = e.detail.width;
      var height = e.detail.height;

      if (width > sysRes.windowWidth) {
        height = sysRes.windowWidth * height / width;
        width = sysRes.windowWidth;
      }

      var htmlParseImg = _this.htmlParseImg;
      htmlParseImg[e.currentTarget.dataset.index] = {
        width: width,
        height: height,
        src: e.currentTarget.dataset.src
      };

      _this.setData({
        htmlParseImg: htmlParseImg
      });
    },
    htmlParseImgTap: function (e) {
      var urls = [];

      for (var i in _this.htmlParseImg) {
        urls.push(_this.htmlParseImg[i].src);
      }

      wx.previewImage({
        current: e.currentTarget.dataset.src,
        urls: urls
      });
    },
    scene: function () {},
    setPageContent: function (res) {
      _this.setData({
        group_detail: res
      });

      wx.hideToast();
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
/* @import "../index/html_parse.css"; */
.container{

}
.imgBox{
    width:100%;
    position:relative;
}
.imgBox image{
    width:100%;
    height:100%;
}
.imgBox .back {
    width: 76rpx;
    height: 76rpx;
    top: 20rpx;
    left: 20rpx;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
}
.imgBox .back:after {
    display: block;
    content: "";
    border-top:4rpx solid white;
    border-left:4rpx solid white;
    width:24rpx;
    height:24rpx;
    -webkit-transform: rotate(315deg);
    background-color: transparent;
    position: absolute;
    top: 22rpx;
    left: 30rpx;
}
.imgBox .imgCon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    background-color: rgba(0,0,0,0.6);
    padding:16rpx 12rpx;
}
.imgBox .imgCon .title {
    font-size: 32rpx;
    line-height: 1.8;
    font-weight: bold;
}

.priceDiv {
    padding:30rpx 24rpx;
    position: relative;
    border-bottom: 2rpx solid #f1f1f1;
}
.priceDiv .price {
    color: #06c1ae;
    font-size:44rpx;
}
.priceDiv .price .old {
    color: #999;
    margin-left:24rpx;
    font-size:28rpx;
}
.priceDiv .buy-btn {
    position: absolute;
    display: inline-block;
    right: 20rpx;
    width: 240rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #FF6634;
    color: white;
    font-size: 32rpx;
    border-radius: 8rpx;
}
.cheapDiv {
    padding:20rpx 0 20rpx 24rpx;
    color: #999;
    border-bottom: 2rpx solid #f1f1f1;
}
.cheapDiv .tag{
    display: inline-block;
    margin-left: 6rpx;
    border: 2rpx solid #f58300;
    color: #f58300;
    padding: 2rpx 6rpx;
    border-radius: 4rpx;
    font-size: 24rpx;
    line-height: 24rpx;
}
.saleDiv {
    padding:30rpx 24rpx;
    margin-bottom: 20rpx;
    color: #a1a1a1;
    position: relative;
}
.saleDiv .span{
    display: inline-block;
    margin-right:24rpx;
}
.saleDiv .sale {
    position: absolute;
    right: 24rpx;
    color: #999;
    letter-spacing: 1rpx;
    margin-right: 0;
}
.saleDiv .span text{
    vertical-align: top;
    margin-right: 4px;
}

.storeBox .item{
    border-bottom:2rpx solid #f1f1f1;
    padding: 24rpx 128rpx 16rpx 24rpx;
    position: relative;
}
.storeBox .item:last-child {
    border-bottom: none;
}
.storeBox .item .name {
    color: black;
    font-size: 32rpx;
    line-height: 2;
}
.storeBox .item .address {
    color: #999;
    line-height: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 56rpx;
    font-size:24rpx;
}
.storeBox .item .phoneBox{
    top:0;
    right:-12rpx;
    width:124rpx;
    height:100%;
    position: absolute;
    z-index:5;
}
.storeBox .item .phone {
    position: absolute;
    right: 0px;
    width: 124rpx;
    border-left:2rpx solid #f1f1f1;
    top: 30rpx;
    bottom: 30rpx;
    background: url(https://hf.pigcms.com/tpl/Wap/pure/static/img/phoneBig.png) no-repeat;
    background-size: 36rpx;
    background-position: center center;
}
.storeBox .more {
    height: 90rpx;
    line-height: 90rpx;
    border-top: 2rpx solid #f1f1f1;
    padding-left: 24rpx;
    font-size: 32rpx;
    color: #06c1ae;
    position: relative;
}
.storeBox .more:after {
    display: block;
    content: "";
    border-top: 2rpx solid #BFBFBF;
    border-left: 2rpx solid #BFBFBF;
    width: 16rpx;
    height: 16rpx;
    -webkit-transform: rotate(135deg);
    background-color: transparent;
    position: absolute;
    top: 50%;
    right: 24rpx;
    margin-top: -10rpx;
}
.introList.term .item{
    margin: 16rpx 0;
    color: #666;
}
.introList.term .item .fw{
    font-weight: normal;
    color: #ff9c00;
    display: block;
}

.introList {
    background-color: white;
    border-top: 2rpx solid #f1f1f1;
    border-bottom: 2rpx solid #f1f1f1;
    padding:0 16rpx;
    margin-bottom:20rpx;
}
.introList .content {
    padding: 28rpx 0;
    color: #a1a1a1;
}

.group_list{
    padding:0 20rpx;
}


.positionDiv {
    bottom: 0;
    position: fixed;
    z-index: 997;
    height: 100rpx;
    width: 100%;
    background-color: #F7F7F7;
}
.positionDiv .back {
    width: 38px;
    height: 38px;
    top: 6px;
    left: 10px;
    position: absolute;
    border-radius: 50%;
}
.positionDiv .back:after {
    display: block;
    content: "";
    border-top: 2px solid #06c1ae;
    border-left: 2px solid #06c1ae;
    width: 12px;
    height: 12px;
    -webkit-transform: rotate(315deg);
    background-color: transparent;
    position: absolute;
    top: 11px;
    left: 15px;
}
.positionDiv .center {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: black;
    max-width: 60%;
    margin: 0 auto;
}
.positionDiv .buy-btn {
    position: absolute;
    display: inline-block;
    right: 10px;
    padding: 0 10px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background-color: #FF6634;
    color: white;
    font-size: 14px;
    border-radius: 4px;
    top: 10px;
}




/*团购详情*/
.standard-bar{
    background:#EEEEEE;
    color:#333333;
    font-weight:700;
    font-size:32rpx;
    padding:8rpx;
}
.deal-menu-summary {
    padding: 0 20rpx 20rpx;
    text-align: right;
    border-bottom: 2rpx #e8e8e8 solid;
    display:none;
}
</style>